<template>
    <view class="page">
        <hj-navbar title="消息列表" />
        <scroll-view
            class="scroll"
            :scroll-y="true"
            :style="scrollStyle"
            :refresher-enabled="true"
            @refresherrefresh="onRefresh"
            :refresher-triggered="triggered"
            @scrolltolower="onScrollToLower"
        >
            <NewsList v-if="true" :list="listData" />
            <!-- 缺省图 -->
            <hj-no-data v-else tipsText="暂无消息" />
            <!-- 底部加载组件 -->
            <u-loadmore
                v-if="true"
                :status="loadStatus"
                loadingText="加载中..."
                loadmoreText="滑动加载"
                nomoreText="已经被你掏空了~"
            />
            <!-- 内容区域加载动画 -->
            <hj-loading :show="loading" :z-index="20" />
            <!-- 安全底部 -->
            <hj-safe-footer />
        </scroll-view>
    </view>
</template>

<script setup>
/**
 * @description 积分商城页面
 * @author yinzhi
 * @date 2025-03-17
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, defineComponent } from 'vue'
import { logger } from '@/utils/log.js'
import { useStore } from 'vuex'

import NewsList from './components/NewsList.vue'
defineComponent({
    components: {
        NewsList
    }
})

const store = useStore()

// 底部加载状态 loading / nomore
const loadStatus = ref('loadmore')
// 加载弹窗是否显示
const loading = ref(false)

onLoad(async () => {
    loading.value = true
    await getListData()
})

// 列表数据
const listData = ref([])
// 总条数
const total = ref(0)
// 请求参数
const params = ref({
    pageNo: 1,
    pageSize: 30
})
// 请求列表数据
const getListData = async () => {
    try {
        const { data } = {
            data: {
                list: [],
                total: 0
            }
        }
        listData.value = data?.list || []
        total.value = data?.total || 0
        let time = setTimeout(() => {
            loading.value = false
            loadStatus.value = 'loadmore'
            clearTimeout(time)
        }, 800)
    } catch (error) {
        logger.error({ '[getListData]-消息列表数据请求失败：': error })
    }
}

// 导航栏高度
const navBarHeight = computed(() => store.state.platform.systemInfo?.navBarHeight || 0)
// 滚动区样式
const scrollStyle = computed(() => {
    return {
        height: `calc(100vh - ${navBarHeight.value}px)`
    }
})

// 开启自定义下拉刷新
const triggered = ref(false)
const _freshing = ref(false)
// 下拉刷新
const onRefresh = async () => {
    // 防止多次刷新
    if (_freshing.value) return
    _freshing.value = true
    triggered.value = true
    params.value.pageNo = 1
    let time = setTimeout(() => {
        getRefresh()
        clearTimeout(time)
    }, 600)
}
// 滚动到底部
const onScrollToLower = async () => {
    // 对接后的条件判断
    // listData.value.length === total.value
    if (params.value.pageNo === 2) {
        loadStatus.value = 'nomore'
        return
    }
    loadStatus.value = 'loading'
    params.value.pageNo += 1
    await getListData()
}

// 刷新事件 等所有接口请求 完成后使刷新动画回弹
const getRefresh = () => {
    Promise.all([getListData()])
        .then(() => {
            triggered.value = false
            _freshing.value = false
        })
        .catch(() => {
            triggered.value = false
            _freshing.value = false
        })
}
</script>

<style scoped lang="scss"></style>
